<template>
    <div class="search margin-15-0 ">
        <input type="text" placeholder="Search . . ." required>
    </div>
  </template>
  <script setup lang="ts">
  import {ref,reactive} from "vue"
  
  
  
  
  </script>
  <style lang="scss" scoped>
  
  .search {
    display: flex;
    overflow: hidden;
    // overflow-x: hidden;
  }
  .search > div {
    display: inline-block;
    position: relative;
    filter: drop-shadow(0 1px #0091c2);
  }
  
  .search > div:after {
    content: "";
    background: white;
    width: 4px;
    height: 10px;
    position: absolute;
    top: 25px;
    right: 0;
    transform: rotate(135deg);
  }
  
  .search > div > input {
    color: white;
    font-size: 16px;
    background: transparent;
    width: 30px;
    height: 30px;
    padding: 10px;
    border: solid 3px white;
    outline: none;
    border-radius: 35px;
    transition: width 0.5s;
  }
  
  .search > div > input::placeholder {
    color: #efefef;
    opacity: 0;
    transition: opacity 150ms ease-out;
  }
  
  .search > div > input:focus::placeholder {
    opacity: 1;
  }
  
  .search > div > input:focus,
  .search > div > input:not(:placeholder-shown) {
    width: 250px;
  }
  
  </style>
  